<template>
  <!-- <div>用户列表 (用户列表完美实现)</div> -->
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>注册用户列表</span>
      </div>
      <div>
           <el-table v-loading="loading" border :data="userList" style="width: 100%">
                <el-table-column type="index" label="序号"  width="50"></el-table-column>
                <el-table-column prop="username" label="用户名"  width="180">       
                </el-table-column>
                <el-table-column  label="头像"  width="100">
                    <template slot-scope="scope">
                            <div class="photo">
                        <img :src="scope.row.icon" alt="">
                         </div>  
                    </template>         
                </el-table-column>
                <el-table-column prop="nickname" label="昵称"  width="180"></el-table-column>
                <el-table-column prop="realname" label="真实姓名"  width="180"></el-table-column>
                <el-table-column prop="sex" label="性别"  width="180"></el-table-column>
                <el-table-column prop="phone" label="电话"  width="180"></el-table-column>
                <el-table-column prop="email" label="邮箱"  width="180"></el-table-column>
                <el-table-column prop="birthday" label="生日"  width="180"></el-table-column>
                <el-table-column prop="phone" label="注册时间"  width="180"></el-table-column>
            </el-table>
      </div>
      <!-- 这是分页 -->
          <div>
             <el-pagination 
              :current-page="page.start"
              :page-sizes="page.pageSizes"
              :page-size="page.limit" 
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"  
              @current-change="handleCurrentChange">
              </el-pagination>
          </div>
    </el-card>
  </div>
</template>
<script>
import user from "@/api/user/list"
export default {
  data() {
    return {
       userList:[],
         //页码
      page:{
          //开始页
        start: 1,
        //最多几行
        limit: 5,
        //总页数
        total: 0,
        pageSizes:[5, 10, 20, 30],
      },
      loading:false
    };
  },
  methods:{
      //获取注册用户列表
      init(){
        this.loading=true;
          user.findMembersByPage(this.page.start,this.page.limit).then(res=>{
              console.log(res);
              this.loading=false;
              if(res.success){
                  this.userList=res.data.rows;
                  this.page.total=res.data.total;
              }else{
                  this.$message.error("获取注册用户列表失败")
              }
          })
      },
    //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
  },
  created(){
      this.init();
  }

};
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
.photo{
    width:50px;
    height:50px;
    margin: 10px auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgb(156, 197, 209);
    img{
        width: 100%;
        height: 100%;
    }
}

</style>